<template>
	<view class="template-login" :style="{'backgroundImage':`url(${bg})`}">
		<view class="login">
			<!-- 顶部背景图片-->
			<view style="height: 150px"></view>

			<view class="login__wrapper">
				<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 50rpx; text-align: center; line-height: 1.8em; padding-top: 40rpx">
					救援业绩全过程考核平台
				</view>
				<!-- 输入框内容-->
				<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<!-- 登录 -->
					<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
						<view class="login__info__item__input__left-icon">
							<view class="tn-icon-my-circle"></view>
						</view>
						<view class="login__info__item__input__content">
							<input v-model="userName" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入用户名" />
						</view>
					</view>

					<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
						<view class="login__info__item__input__left-icon">
							<view class="tn-icon-keyboard-circle"></view>
						</view>
						<view class="login__info__item__input__content">
							<input type="password" v-model="password" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入密码" />
						</view>
					</view>

					<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150" @click="toLogin">登录</view>
				</view>
			</view>
			<!-- 底部背景图片-->
			<view class="login__bg login__bg--bottom"></view>
		</view>
	</view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js';
import { login } from '@/api/login.js';
import {getToken, setToken} from '@/utils/auth';
import { baseUrl } from '@/config';
import bg from '@/static/login/login_bg.png'
import avatar from '@/static/login/logo.png'

export default {
	name: 'login-demo-4',
	mixins: [template_page_mixin],
	data() {
		return {
			bg,
			captchaSrc: null,
			userName: '',
			password: '',
			uuid: null,
			randCode: null
		};
	},
	watch: {
		currentModeIndex(value) {
			const sliderWidth = uni.upx2px(476 / 2);
			this.modeSliderStyle.left = `${sliderWidth * value}px`;
		}
	},
	onLoad() {
		// 判断 当前是否登录
		let session = getToken();
		if (session) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
		// this.getCaptcha()
	},
	onShow() {
		try {
			const value = uni.getStorageSync('zhanghao');
			if (value) {
				console.log(value);
				this.password = value.password;
				this.userName = value.username;
			}
		} catch (e) {
			// error
		}
	},
	methods: {
		toLogin() {
			let data = {
				password: this.password,
				username: this.userName,
				uuid: this.uuid
			};
			login(data).then((res) => {
				if (res.code === 0) {
					uni.setStorageSync('userInfo', { avatar, ...res.data });
					setToken(res.data.token);
					uni.switchTab({
						url: '/pages/index/index'
					});
					uni.setStorageSync('zhanghao', data);
				} else {
					uni.showModal({
						content: res.msg,
						showCancel: false
					});
				}
			});
		},
		getCaptcha() {
			const self = this;
			getCodeImg().then((res) => {
				this.captchaSrc = 'data:image/gif;base64,' + res.img;
				this.uuid = res.uuid;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';

.template-login {
	min-height: 100vh;
	background-size: cover;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(59, 130, 246, 0.5); /* 蒙层颜色和透明度 */
	}
}
.login {
	position: relative;
	height: 100vh;
	z-index: 1;
	// background: rgba(59, 130, 246, 0.5);
	&__bg {
		z-index: -1;
		position: fixed;

		&--top {
			top: 0;
			left: 0;
			right: 0;
			width: 100%;

			.bg {
				width: 750rpx;
				will-change: transform;
			}
		}

		&--bottom {
			bottom: -10rpx;
			left: 0;
			right: 0;
			width: 100%;
			// height: 144px;
			margin-bottom: env(safe-area-inset-bottom);

			image {
				width: 750rpx;
				will-change: transform;
			}
		}
	}

	/* 内容 start */
	&__wrapper {
		background: rgba(255, 255, 255, 1);
		margin: 20px;
		border-radius: 20px;
	}

	/* 切换 start */
	&__mode {
		position: relative;
		margin: 0 auto;
		width: 476rpx;
		height: 77rpx;
		margin-top: 100rpx;
		background-color: rgba(255, 255, 255, 0.6);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
		border-radius: 39rpx;

		&__item {
			height: 77rpx;
			width: 100%;
			line-height: 77rpx;
			text-align: center;
			font-size: 31rpx;
			color: #080808;
			letter-spacing: 1em;
			text-indent: 1em;
			z-index: 2;
			transition: all 0.4s;

			&--active {
				font-weight: bold;
				color: #ffffff;
			}
		}

		&__slider {
			position: absolute;
			height: inherit;
			width: calc(476rpx / 2);
			border-radius: inherit;
			box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
			z-index: 1;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
	}

	/* 切换 end */

	/* 登录注册信息 start */
	&__info {
		margin: 0rpx 30rpx 10rpx 30rpx;
		padding-bottom: 0;
		border-radius: 20rpx;

		&__item {
			&__input {
				margin-top: 59rpx;
				width: 100%;
				height: 77rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 39rpx;

				&__left-icon {
					width: 10%;
					font-size: 44rpx;
					margin-left: 20rpx;
					color: #838383;
				}

				&__content {
					width: 80%;
					padding-left: 10rpx;

					&--verify-code {
						width: 56%;
					}

					input {
						font-size: 24rpx;
						// letter-spacing: 0.1em;
					}
				}

				&__right-icon {
					width: 10%;
					font-size: 44rpx;
					margin-right: 20rpx;
					color: #838383;
				}

				&__right-verify-code {
					width: 34%;
					margin-right: 20rpx;
				}
			}

			&__button {
				margin-top: 75rpx;
				margin-bottom: 39rpx;
				width: 100%;
				height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				font-weight: bold;
				line-height: 77rpx;
				letter-spacing: 1em;
				text-indent: 1em;
				border-radius: 39rpx;
				box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
			}

			&__tips {
				margin: 30rpx 0;
				color: #aaaaaa;
			}
		}
	}

	/* 登录注册信息 end */

	/* 登录方式切换 start */
	&__way {
		margin: 0 auto;
		margin-top: 110rpx;

		&__item {
			&--icon {
				width: 85rpx;
				height: 85rpx;
				font-size: 80rpx;
				// border-radius: 100rpx;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				// &::after {
				//   content: " ";
				//   position: absolute;
				//   z-index: -1;
				//   width: 100%;
				//   height: 100%;
				//   left: 0;
				//   bottom: 0;
				//   border-radius: inherit;
				//   opacity: 1;
				//   transform: scale(1, 1);
				//   background-size: 100% 100%;
				//   background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
				// }
			}
		}
	}

	/* 登录方式切换 end */
	/* 内容 end */
}

::v-deep.input-placeholder {
	font-size: 24rpx;
	color: #838383;
}
</style>
